import React, { useState } from 'react';
// import './style.scss';

const AdvancedParams = (props) => {
    const { formData, type, onAdvancedParamsChange } = props;
    const [isAdvancedParamsVisible, setIsAdvancedParamsVisible] =
        useState(false);

    const toggleAdvancedParams = () => {
        setIsAdvancedParamsVisible(!isAdvancedParamsVisible);
    };
    const handleInputChange = (e) => {
        const { name, value } = e.target;
        onAdvancedParamsChange(name, value);
    };

    return (
        <div className="advanced-params">
            <div className="input-group">
                <button
                    type="button"
                    id="toggleAdvancedParams"
                    className={`btn btn-outline ${
                        isAdvancedParamsVisible ? 'expanded' : ''
                    }`}
                    onClick={toggleAdvancedParams}
                >
                    高级参数
                </button>
            </div>

            <div
                className={`advanced-params-content ${
                    isAdvancedParamsVisible ? 'visible' : ''
                }`}
            >
                {type === 'image' && (
                    <div className="input-group param-row" id="sizeParamRow">
                        <div className="input-label">视频分辨率</div>
                        <select
                            className="select-input"
                            id="sizeParam"
                            name="ratio"
                            value={formData.ratio}
                            onChange={handleInputChange}
                        >
                            <option value="1280*720">1280*720 (16:9)</option>
                            <option value="960*960">960*960 (1:1)</option>
                            <option value="720*1280">720*1280 (9:16)</option>
                            <option value="1088*832">1088*832 (4:3)</option>
                            <option value="832*1088">832*1088 (3:4)</option>
                        </select>
                    </div>
                )}

                <div className="input-group param-row" id="durationParamRow">
                    <div className="input-label">视频时长(秒)</div>
                    <select
                        className="select-input"
                        id="durationParam"
                        name="duration"
                        value={formData.duration}
                        onChange={handleInputChange}
                    >
                        <option value="5">5</option>
                        <option value="4">4</option>
                        <option value="3">3</option>
                    </select>
                </div>
                <div className="input-group param-row" id="promptExtendRow">
                    <div className="input-label">智能改写</div>
                    <select
                        className="select-input"
                        id="promptExtendParam"
                        name="prompt_extend"
                        value={formData.prompt_extend ? 'true' : 'false'}
                        onChange={handleInputChange}
                    >
                        <option value="true">开启</option>
                        <option value="false">关闭</option>
                    </select>
                </div>
                <div className="input-group param-row" id="seedParamRow">
                    <div className="input-label">随机数种子</div>
                    <input
                        type="number"
                        className="text-input"
                        id="seedParam"
                        name="seed"
                        placeholder="可选，范围0-2147483647"
                        min="0"
                        max="2147483647"
                        value={formData.seed || ''}
                        onChange={handleInputChange}
                    />
                </div>
                {/* <div className="input-group param-row" id="batchGenerationRow">
                    <div className="input-label">批量生成</div>
                    <div className="batch-generation-container">
                        <select
                            className="select-input"
                            id="batchGenerationParam"
                            name="batch_generation"
                        >
                            <option value="1">1 (单次生成)</option>
                            <option value="2">2</option>
                            <option value="3">3</option>
                            <option value="4">4 (最大)</option>
                        </select>
                        <div className="batch-generation-note">
                            每隔10秒自动提交一次，共提交所选次数，适用于所有视频类型
                        </div>
                    </div>
                </div> */}
            </div>
        </div>
    );
};

export default AdvancedParams;
